<template>
  <navigation></navigation>
  <div class="overall">
    <div class="content">
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
      >
      <div class="title">
        <div><p>{{ competitionInfo.name }}</p></div>
      </div>
      <div class="personInfo">
        <div class="personInfo-one">
          <div class="personInfo-one-left">
            姓名 <br />
            <el-form-item prop="name">
            <el-input
              v-model="ruleForm.name"
              style="width: 240px"
              placeholder="您的姓名"
              maxlength="6"
            />
            </el-form-item>
          </div>
          <div class="personInfo-one-right">
            电话 <br />
            <el-form-item prop="telephone">
            <el-input
              v-model="ruleForm.telephone"
              style="width: 240px"
              placeholder="您的手机号"
            />
            </el-form-item>
          </div>
        </div>
        <div class="personInfo-two">
          <div class="personInfo-one-left">
            邮箱 <br />
            <el-form-item prop="email">
            <el-input
              v-model="ruleForm.email"
              style="width: 240px"
              placeholder="您的邮箱"
            />
            </el-form-item>
          </div>
          <div class="personInfo-one-right">
            学院 <br />
            <el-form-item prop="value1">
            <el-select
              v-model="ruleForm.value1"
              placeholder="选择学院"
              size="default"
              style="width: 240px"
            >
              <el-option
                v-for="item in options1"
                :key="item.value1"
                :label="item.label"
                :value="item.value1"
              />
            </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="personInfo-three">
          <div class="personInfo-one-left">
            年级 <br />
            <el-form-item prop="value2">
            <el-select
              v-model="ruleForm.value2"
              placeholder="选择年级"
              size="default"
              style="width: 240px"
            >
              <el-option
                v-for="item in options2"
                :key="item.value2"
                :label="item.labe2"
                :value="item.value2"
              />
            </el-select>
            </el-form-item>
          </div>
          <div class="personInfo-one-right">
            专业 <br />
            <el-form-item prop="value3">
            <el-select
              v-model="ruleForm.value3"
              placeholder="选择专业"
              size="default"
              style="width: 240px"
            >
              <el-option
                v-for="item in options3"
                :key="item.value3"
                :label="item.labe3"
                :value="item.value3"
              />
            </el-select>
            </el-form-item>
          </div>
        </div>
      </div>
      

      <div class="footer">
        <div class="button">
          <el-button plain @click="returnHome">关闭</el-button>
          <el-button type="success" @click="Submit(ruleFormRef)">提交</el-button>
        </div>
      </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { onMounted, ref, reactive} from "vue";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
// import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import router from "@/router";

const route = useRoute();
const id = ref(route.query.id);
console.log(id.value);

// const router = useRouter()
const returnHome = () => {
  router.back()
};


const Submit = async(formEl: FormInstance | undefined) => {
  fetch("http://localhost:3000/TbEntryformController/saveEntryinfo", {
    method: "post",
    headers:{'Content-Type':'application/json;charset=UTF-8'},
    body: JSON.stringify({
      stuname: ruleForm.name,
      sno: userInfo.value.sno,
      email: ruleForm.email,
      telephone: ruleForm.telephone,
      grade: ruleForm.value2,
      major: ruleForm.value3,
      college: ruleForm.value1,
      comId: competitionInfo.value.id,
    }),
  }).then(async(res) => {
    if (!formEl) return
      await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('addactive!')
        alert('报名成功！')
                window.location.href = '/stuinfo'
      } else {
        console.log('error submit!', fields)
      }
    })
})
};

const userid = ref(localStorage.getItem("token"));
const userInfo = ref([]);
const queryUserId = () => {
  fetch(
    `http://localhost:3000/TbUserinfoController/getUserinfoById/${userid.value}`
  )
    .then((res) => res.json())
    .then((res) => {
      userInfo.value = res.data;
    });
};

const competitionInfo = ref([])
const queryCompetitionInfo = () => {
  fetch(`http://localhost:3000/TbCompetitionActivityController/getCompetitioninfoById/${id.value}`).then(res=>res.json()).then(res=>{
    competitionInfo.value = res.data
    console.log(competitionInfo.value);
  })
}

onMounted(() => {
  queryUserId();
  queryCompetitionInfo()
});

const value1 = ref("");
const value2 = ref("");
const value3 = ref("");

const options1 = [
  { value1: "信息工程学院" },
  { value1: "农学院" },
  { value1: "机械工程与电气学院" },
];

const options2 = [
  { value2: "2018级" },
  { value2: "2019级" },
  { value2: "2020级" },
  { value2: "2021级" },
  { value2: "2022级" },
  { value2: "2023级" },
  { value2: "2024级" },
];

const options3 = ref([
  { value3: "物联网工程" },
  { value3: "计算机科学与技术" },
  { value3: "保密管理" },
  { value3: "机械制造及其自动化" },
  { value3: "机械制造及其自动化" },
]);


interface RuleForm {
  name: string;
  telephone: string;
  email: string;
  value1: string;
  value2: string;
  value3: string;
}

const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  name: '',
  telephone: '',
  email: '',
  value1: '',
  value2: '',
  value3: ''
});

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { max: 6, message: "长度不能超过6个字符", trigger: "blur" },
  ],
  telephone: [
    { required: true, message: "请输入电话", trigger: "blur" },
    { min: 11, max: 11, message: "请输入正确联系方式", trigger: "blur" },
  ],
  email: [
    { required: true, message: "请输入邮箱地址", trigger: "blur" },
  ],
  value1: [{ required: true, message: "请选择学院", trigger: "blur" }],
  value2: [{ required: true, message: "请选择年级", trigger: "blur" }],
  value3: [{ required: true, message: "请选择专业", trigger: "blur" }]
});
</script>

<style scoped>
.overall {
  margin-top: 90px;
  display: flex;
}
.content {
  margin: auto;
  width: 1000px;
  text-align: center;
  box-shadow: 0 0 1px 1px #ccc;
}

.personInfo-one {
  padding-top: 50px;
  display: flex;
  justify-content: space-between;
}

.personInfo-one-left {
  text-align: left;
  padding-left: 200px;
}

.personInfo-one-right {
  text-align: left;
  padding-right: 200px;
}

.personInfo-two {
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
}
.personInfo-three {
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
}

.footer {
  padding-left: 750px;
  padding-bottom: 20px;
}

.button {
  padding-top: 60px;
  padding-left: 10px;
}
</style>